Качество верстки

[mishka]

Часто Макс говорит о качестве верстки.

Макс, что ты под этим подразумеваешь?

Ну вопрос не только к Максу. К каждому в частности.

[klierik]

я какие есть варианты ответа?

[Svatov]

Качественная верстка это та которая незаметна пользователю.

[Great Rash]

Не знаю, что кто подразумевает, но как по мне главное в верстке, чтоб она была железобетонная, т.е. чтоб ее развалить было ну очень сложно. Все остальное не важно совершенно.

[klierik]

я опираюсь на методологию БЭМ со всеми вытекающими.

[mishka]

Сегодня я сказал что реально сверстать макет предложенный buddah за 2 дня.

Может я конечно и загнул, сам давненько не верстал, да и дома скорость верстки значительно меньше чем в офисе.

Макс, как всегда, начал разговоры о скорости и качестве, вот мне и интересно что он под этим понимает.

Просто помню как Макс рассказывал о том что верстка на емах - это круче чем все что только может быть, и что он в этом деле приуспел ну и значит он, как всегда, самый крутой верстала ну и в том духе.

Я тогда показал ему что есть на самом деле верстка на емах, и что есть его верстка на емах.

Тогда Макс говорил что верстка на емах - это качество. После понял что это не так уж и правильно то что он делал.

Макс, что сейчас есть "качество" в твоем понимании?

Пост никак не для того чтобы показать что ктото круче ктото не круче верстает. Просто если заговорили про качество, то и хочется узнать что и как кто делает.

Например я сверстал, отдал на проверку, проверяющий сказал что где поправить. я поправил, проверяющий проверил, если все ок - отправил клиенту. Все.

А если вы сами себе тестеры, то как тестите, на что обращаете внимание ну и так далее.

У меня есть свои понятия на этот счет, но вот хочу услышать мнения других.

[psywalker]

Часто Макс говорит о качестве верстки.

Макс, что ты под этим подразумеваешь?

Ну вопрос не только к Максу. К каждому в частности.

Ну смотри, я лично представляю себе качественную вёрстку так:

1. Качественную вёрстка должна быть пуленепробиваемой, пожаростоякой и прочной. Т.е. например чтобы я смело мог засунуть в любые блоки, какой угодно контент, картинки, текст и прочее и чтобы при этом она не развалилась и не поехала.

2. Качественная вёрстка должна быть секционная и независимая, т.е. сделана независимыми блоками и поделена на секции, каждая из которых представляет собой самодостаточный объект со своими элементами. Например - это Хедер, Футер и т.д. Т.е. например, чтобы я смело мог выдернуть из структуры блок Хедер и при этом на остальные секции это ни оказало никакого влияния. Как пример - они встали на

место хедера в потоке, и всё.

3. В качественной вёрстке все отдельные блочки в секциях должны тоже быть продуманы, например они могут быть переносимыми блоками, т.е. свободно мигрировать из секции в секцию, и например плясать от контекста. Так же они тоже должны быть качественно сделанными, как пункт 1.

4. Качественной вёрстка должна быть устойчивой к размерам шрифта и разрешениям экрана, должна быть по максимуму масштабируемой, хотя бы на -+2 размера шрифта. И чтобы сделано это было правильно, а не косячно.

5. Код качественной вёрстки должен быть красивым, понятным и организованным, причём не только для автора, но и для людей со-стороны. Т.е. должна быть чёткая, продуманная организация в тех же стилях.

6. А так же код качественной вёрстки должен быть написан с умом и продуман, а не лишь бы как. Т.е. например плохо страдать минимализмом и не использовать классы, где это нужно или например жадничать лишними дивами, там, где они могут реально помочь и дать только плюсы.

Т.е. думать над каждой деталькой и блоком в целом.

7. Качественная вёрстка должна быть рассчитана на будущее, т.е. всегда нужно думать о будущем этой вёрстки, о том, как с ней смогут работать программеры, как эта вёрстка сможет поддерживаться в будущем, примерно где и что, какие блоки могут быть заменены или в них будут вноситься правки, вставляться элементы, какие-то части и прочее.

В общем нужно делать вёрстку не на сегодняшний день, а продумывать её будущее на много ходов вперёд.

8. Качественная вёрстка со стороны должна выглядеть так, чтобы её вид создавал впечатление чёткости, продуманности, качества и т.д. Т.е. например чтобы по её виду, можно было смело сказать, что люди, которые над ней работали, постарались покрополить над каждой деталькой, думали над каждым пикселем.

Например в глаза может сразу броситься, небрежно сделанные отступы с разных сторон, где-то вылезает уголок на пиксель, где-то кегель шрифта одного абзаца не совпадает с рядом стоящим, точно таким же абзацем и всё, всё, всё в этом духе. Мелочей на самом деле уйма и Имхо, качественное отношение к работе видно сразу. Даже маленькие пиксели играют большую роль в этом деле.

9. Качественная вёрстка должна выглядеть почти одинаково (в идеале одинаково) во-всех оговоренных в Т3 браузерах, если об исключениях не оговорено отдельно. Так же эта вёрстка должна абсолютно одинаково выполнять свои функции во-всех браузерах, опять же, оговоренными в тех-задании. Т.е. например в ФФ любые элементы должны обладать идентичными возможностями с этими же элементами в ИЕ6. Не должно быть такого, например, что в ФФ я могу засунуть в хедер картинку, а в ИЕ6 не могу и т.д.

Ну вот, пожалуй в кратце описал своё видение качественной вёрстки. Всё это конечно утрировано, и естественно я не призываю следовать всем пунктам в обязательном порядке. Просто лично для себя, всегда стараюсь по максимуму им следовать, вот и всё.

[mishka]

В общем ничего нового. Все одно и тоже.

[psywalker]

mishka,

Тогда Макс говорил что верстка на емах - это качество. После понял что это не так уж и правильно то что он делал.

Да, да, было такое дело, года два назад, не спорю. И на тот момент я действительно наивно полагал, что емы - это панацея и лучше них просто не существует. И спасибо, что открыл мне глаза на правду (спустил на землю), т.е. на другую, как мне кажется, более правильную точку зрения.

В одном своём посте (пункт 4), я как-то писал, что время от времени стараюсь переосмысливать новый и старый опыт. На данный момент я вообще придерживаюсь той точки зрения, что никогда нельзя говорить, что плохо, а что хорошо, а нужно всегда отталкиваться от конкртеной ситуации и плясать именно от неё. И если, напирмер в кокртеной ситуации лучше подойдут емы - то я буду испльзовать их.

В общем ничего нового. Все одно и тоже.

В смысле? А что ты надеялся услышать?

[cyklop77]

скажите мне тёмному что такое "вёрстка на емах"?

[Vlad]

em это такая единица измерения в CSS.

[psywalker]

скажите мне тёмному что такое "вёрстка на емах"?

Вооо, откопал свою старинную вёрстку. Когда ещё на емах верстал. Будет желание, зацени http://psywalker.ru/SAITS/Himik/main-page.html

[cyklop77]

скажите мне тёмному что такое "вёрстка на емах"?

Вооо, откопал свою старинную вёрстку. Когда ещё на емах верстал. Будет желание, зацени http://psywalker.ru/SAITS/Himik/main-page.html

случайно в гугле натолкнулся на еще одну твою вёрстку на емах. судя по

*{ margin: 0; padding: 0; outline: none; }

и по форматированию это еще более ранняя работа

ps

в емы пока не въехал, но слайдер понравился. его даже кликабельным можно сделать не сильно напрягаясь. не зря ковырял))

[psywalker]

скажите мне тёмному что такое "вёрстка на емах"?

Вооо, откопал свою старинную вёрстку. Когда ещё на емах верстал. Будет желание, зацени http://psywalker.ru/SAITS/Himik/main-page.html

случайно в гугле натолкнулся на еще одну твою вёрстку на емах. судя по

*{ margin: 0; padding: 0; outline: none; }

и по форматированию это еще более ранняя работа

Ага) Как ты её откопал только

ps в емы пока не въехал, но слайдер понравился. его даже кликабельным можно сделать не сильно напрягаясь. не зря ковырял))

Какой слайдер?

p.s. Сейчас глянул на код...ну блиин, такое реально стыдно показывать людям

Edited August 24, 2011 by psywalker
Ужаснулся, глядя в код.

[cyklop77]

Какой слайдер?

в центральной колонке который. там 5 кнопочек с цифрами, на каждой hover-эффект, сменяющий картинки с хоккеистами.

эта штука наверное не слайдер называется?..

[Shift-Web]

А где актуально емы использовать? Я раньше пытался их юзать, прочитав, что это есть тру, но потом понял, что только для принтовых версий под шрифты. Работать с ними не очень приятно.

[DjTarik]

Я везде использую... для всех шрифтов. Для полей и отступов - пикселы. Не знаю, почему так. Привык, проблем не испытываю. =)

[psywalker]

емы нужно использовать там, где они реально нужны, а не где попало. Нужно всегда отталкиваться от ситуации.

[Gaspode]

емы нужно использовать там, где они реально нужны, а не где попало.

А не покажешь какой-нибудь примерчик, где емы - это хорошо, а остальное - не очень?

эта штука наверное не слайдер называется?..

Да нет, слайдер и есть. Слайды же показывает.

Edited August 25, 2011 by Gaspode

[psywalker]

емы нужно использовать там, где они реально нужны, а не где попало.

А не покажешь какой-нибудь примерчик, где емы - это хорошо, а остальное - не очень?

Ну вот, например, смотри. Есть вёрстка . Открой её в ФФ и поставь самый большой размер шрифта в настройках. Как видишь, всё развалилось? Воот. Отсюда возникает вопрос. Нахрена тут емы? Вот, это и есть, плохой пример их использования. А хороший - это тот, где, например, при увеличении шрифта, всё отлично смотрится и не разваливается.

Ну это один из вариантов.

Тоже самое касается и текста. Где-то нужно юзать емы для него, а где-то при увеличении шрифта, сайт просто развалится из-за того, что текст вылезет из своих блоков и разопрёт сайт, который например имеет фикс ширину.

Понял?

эта штука наверное не слайдер называется?..

Да нет, слайдер и есть. Слайды же показывает.

Да, это слайдер, кстати, сделан на чистом CSS и пашет по моему даже в ИЕ6

[Gaspode]

Ну вот, например, смотри. Есть вёрстка . Открой её в ФФ и поставь самый большой размер шрифта в настройках. Как видишь, всё развалилось? Воот. Отсюда возникает вопрос. Нахрена тут емы? Вот, это и есть, плохой пример их использования.

А, ну это-то понятно. Я-то думал про примеры, где вообще все размеры (отступы, ширина, высота и проч.) в емах указываются. У меня есть одна такая работа (показывать не буду ), там если шрифт здоровенный поставить, будет то же самое, как если бы сделать зум. Правда, задолбался изрядно все размеры в емах писать, но это другой разговор.

[psywalker]

Ну вот, например, смотри. Есть вёрстка . Открой её в ФФ и поставь самый большой размер шрифта в настройках. Как видишь, всё развалилось? Воот. Отсюда возникает вопрос. Нахрена тут емы? Вот, это и есть, плохой пример их использования.

А, ну это-то понятно. Я-то думал про примеры, где вообще все размеры (отступы, ширина, высота и проч.) в емах указываются. У меня есть одна такая работа (показывать не буду ), там если шрифт здоровенный поставить, будет то же самое, как если бы сделать зум. Правда, задолбался изрядно все размеры в емах писать, но это другой разговор.

Ну воот, и поэтому нужно всегда смотреть на результат.

[mishka]

там если шрифт здоровенный поставить, будет то же самое, как если бы сделать зум.

Именно это и называется емной версткой.

Чтобы при увеличении шрифта, увеличивалось все, тоесть в ФФ не должно быть разницы между "масштабировать только текст" и "масштабировать все".

То же и в ИЕ, когда меняешь размер шрифта - то меняется все.

Полезного толку от такой верстки мало. В тех браузерах которые умеют масштабировать по отдельности либо только текст либо все - нельзя настроить "масштабировать только текст".

Код увеличивается очень сильно, не все можно сверстать так.

Положительных сторон этого я не нашел.

То что показал Макс, это ни то ни се.

[Nekromancer]

Ну вот, например, смотри. Есть вёрстка . Открой её в ФФ и поставь самый большой размер шрифта в настройках. Как видишь, всё развалилось? Воот. Отсюда возникает вопрос. Нахрена тут емы? Вот, это и есть, плохой пример их использования. А хороший - это тот, где, например, при увеличении шрифта, всё отлично смотрится и не разваливается.

Ну это один из вариантов.

Тоже самое касается и текста. Где-то нужно юзать емы для него, а где-то при увеличении шрифта, сайт просто развалится из-за того, что текст вылезет из своих блоков и разопрёт сайт, который например имеет фикс ширину.

Звучит как верстайте на емах если рушится верстайте на другом, там всегда всё хорошо. Но на емах кошерно же

[sigma77]

Звучит как верстайте на емах если рушится верстайте на другом, там всегда всё хорошо. Но на емах кошерно же

Хз. Я в последнее время всё меньше и меньше вижу кошерности в емах